.progress {
  &-wrapper {
    position: relative;
    width: 100%;
    max-width: 100px;
    height: 100%;
    max-height: 100px;
  }

  &-svg {
    fill: transparent;
    stroke-width: 5px;
  }

  &-inner-circle {
    transform-origin: center;
    transform: rotate(-90deg);
    stroke: var(--warning-border-default);
    stroke-linecap: round;
    transition: 0.5s linear;
  }

  &-outer-circle {
    stroke: var(--greyscale-text-subtle);
  }

  &-icon {
    circle {
      :first-of-type {
        stroke: var(--greyscale-text-subtle);
      }
    }
  }

  &-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
